<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>商家列表</h3>
            </template>
            <!-- 条件搜索区域 -->
            <el-form :inline="true" :model="searchData">
                <el-form-item label="账号">
                    <el-input v-model="searchData.account" placeholder="账号" clearable @input="searchBusiness" />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="searchData.telephone" placeholder="电话" clearable @input="searchBusiness" />
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="searchData.contact" placeholder="联系人" clearable @input="searchBusiness" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="">搜索</el-button>

                </el-form-item>
            </el-form>

            <!-- 表格区域 -->
            <el-table border :data="businessData">
                <el-table-column prop="account" label="账号"></el-table-column>
                <el-table-column prop="regTime" label="注册时间" :formatter="formatDate"></el-table-column>
                <el-table-column prop="telephone" label="电话"></el-table-column>
                <el-table-column prop="contact" label="联系人"></el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="changeBusiness(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteBusiness(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <template #footer>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 10]" layout="total, sizes,  prev, pager, next" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </template>
        </el-card>
        <!-- 编辑的弹窗 -->
        <el-drawer v-model="drawer" title="编辑用户">
            <el-form :model="updateBusiness">
                <el-form-item label="账户">
                    <el-input v-model="updateBusiness.account" placeholder="账户" clearable />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="updateBusiness.password" placeholder="密码" />
                </el-form-item>

                <el-form-item label="电话">
                    <el-input v-model="updateBusiness.telephone" placeholder="电话" />
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="updateBusiness.contact" placeholder="联系人" />
                </el-form-item>

                <el-form-item>
                    <el-button @click="submitBusinessData">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

    </div>

</template>

<script>
import { businessListAPI, businessUpdateAPI, businessDeleteAPI } from "@/api/business.js";
import dayjs from "dayjs";
export default {
    data() {
        return {
            // 控制修改的弹窗
            drawer: false,
            // 搜索对应的数据
            searchData: {},
            // 表格数据
            businessData: [],
            // 分页的参数:
            currentPage: 1,
            pageSize: 2,
            total: 0,
            updateBusiness: {
                account: "",
                password: "",
                telephone: "",
                contact: ""
            },


        };
    },
    methods: {
        //将所有的商家信息查询出来
        searchBusiness() {
            console.log(this.searchData),
                businessListAPI({
                    ...this.searchData,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                }).then((resp) => {
                    this.total = resp.data.total;
                    this.businessData = resp.data.datas;
                });
        },
        //点击编辑弹窗里的提交按钮
        submitBusinessData() {
            businessUpdateAPI(
                this.updateBusiness
            ).then((resp) => {
                if (resp.data === 1) {
                    ElNotification({
                        title: "成功",
                        message: "修改成功",
                        type: "success",
                    });
                    this.drawer = false;
                }
            });
        },
        //点击删除按钮
        deleteBusiness(row) {
            businessDeleteAPI(
                { id: row.id }
            ).then((resp) => {


                if (resp.data == 1) {


                    ElNotification({
                        title: "成功",
                        message: "删除成功",
                        type: "success",
                    });
                    this.searchBusiness();
                } else {
                    ElNotification({
                        title: "失败",
                        message: "删除失败",
                        type: "error",
                    });
                }
            })
        },

        handleSizeChange() {
            this.searchBusiness();
        },
        handleCurrentChange() {
            this.searchBusiness();
        },
        changeBusiness(row) {
            // 让修改弹窗显示
            this.drawer = true;
            // 需要将当前这一行的数据复制给修改的对象
            this.updateBusiness = row;
        },

        // 格式化数据的方法
        formatDate(a, b, c, d) {
            return dayjs(c).format("YYYY-MM-DD HH:mm:ss");
        },
    },
    created() {
        this.searchBusiness();

    },
};
</script>

<style scoped></style>